<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			#s1{
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			我是box1
			<span id="s1">我是一个span</span>
		</div>
		<script type="text/javascript">
			/*
				事件的冒泡(Bublle)
					所谓的冒泡就是指事件向上传到，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
					在开发中大部分冒泡都是非常有用的
					如果不希望发生冒泡可以通过事件对象来取消冒泡
					
			*/
			var s1 = document.getElementById("s1");
			s1.onclick = function(){
				alert("span的单击相应函数")
				//取消冒泡
				event.cancelBubble = true;
			}
			var box1 = document.getElementById("box1");
			box1.onclick = function(){
				alert("box1的单击相应函数")
				event.cancelBubble = true;
			}
			document.body.onclick = function(){
				alert("boby的单击相应函数")
			}
		</script>
	</body>
</html>
